<template>
  <div>
    <h1>{{ nextPlayerText }}</h1>
    <Board
      :list="list"
      :nextPlayerIsX="nextPlayerIsX"
      :line="line"
      @getIndex="getIndex"
    />
  </div>
</template>

<script>
import Board from './components/Board.vue'
import { checkWinner } from "./tools"

export default {
  components: {
    Board
  },
  computed: {
    nextPlayerText() {
      const result = checkWinner(this.list)
      if (result) {
        const val = this.list[result[0]]
        return "Winner: " + val
      }
      return this.nextPlayerIsX ? "Next player: X" : "Next player: O"
    }
  },
  data() {
    return {
      nextPlayerIsX: true,
      list: new Array(9).fill(null),
      line: []
    }
  },
  methods: {
    getIndex(index) {
      // null => x|o || 任何一方胜利
      if (this.list[index] || checkWinner(this.list)) {
        return
      }
      const currentVal = this.nextPlayerIsX ? "x" : "o"
      this.list[index] = currentVal
      this.nextPlayerIsX = !this.nextPlayerIsX

      const result = checkWinner(this.list)
      if (result) {
        this.line = result
      }
    },
  }
}
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}

.Board {
  margin: 50px auto;
}
</style>
